<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            border: 1px solid #000;
        }
        
        div::before {
            content: "我";
            display: inline-block; /*默认为行类元素 行内块元素就是有块元素的宽高特性但是不独占一行*/
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        
        div::after {
            content: "小猪佩奇";
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
<!--
    结构伪类选择器
        E:first-child 匹配父元素中的第一个子元素E
        E:last-child 匹配父元素中最后一个E元素
        E:nth-child(n) 匹配父元素中的第n个子元素E (可以写数字或关键子even odd n 其中如果参数为n则是从0开始遍历2n则是和even一样的效果)
        E:first-of-type 指定类型E的第一个
        E:last-of-type 指定类型E的最后一个
        E:nth-of-type(n) 指定类型E的第n个
    伪元素选择器
        ::before    在元素内部的前面插入内容
        ::after     在元素内部的后面插入内容

        注意:
            before 和 after 必须有 content 属性
            before 在内容的前面, after 在内容的后面
            before 和 after 创建一个元素, 但是属于行内元素
            因为在 dom 里面看不见刚才创建的元素, 所以我们称为伪元素
            伪元素和标签选择器一样, 权重为1
 -->
    <div>是</div>
</body>

</html>